<template>
	<view class="avatar-box">
		<u-toast ref="uToast"></u-toast>
		<img class="avatar-img" :src="userInfo.avatarUrl ? userInfo.avatarUrl : '/static/image/defaultAvatar.png'" @click="onPreviewImg">
		<view class="info-box" @click="onCheckInfo">
			<view class="info-name">{{userInfo.name}}</view>
			<view class="info-vip">
				<view class="vip-id">ID: {{userInfo.id}}</view>
				<view class="vip-box" v-if="!userInfo.isAdmin">
					<img style="width: 60px;height: 45px;transform: translateY(-14px);" src="@/static/image/vip.png">
					<view class="vip-text" style="top: 5%;left: 27%;letter-spacing: 2px;">游客</view>
				</view>
				<!-- <view class="vip-box">
					<img style="width: 78px;height: 45px;transform: translateY(-11px);" src="@/static/image/vipWidth.png">
					<view class="vip-text" style="top: 6%;left: 17%;">白金会员</view>
				</view> -->
				<view class="vip-box" v-if="userInfo.isAdmin">
					<img style="width: 60px;height: 45px;transform: translateY(-14px);" src="@/static/image/vip.png">
					<view class="vip-text" style="top: 5%;left: 27%;letter-spacing: 2px;">管理</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// created() {
		// 	s
		// },
		props: {
			userInfo: { type: Object, default: {} }
		},
		data() {
			return {
				// userInfo: {}
			}
		},
		methods: {
			onCheckInfo() {
				uni.navigateTo({ url: '/pages/admin/mine/pages/info'});
			},
			onPreviewImg() {
				uni.previewImage({
					urls: this.userInfo.avatarUrl ? [this.userInfo.avatarUrl] : ['/static/image/defaultAvatar.png']
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.avatar-box {
		padding-left: 40rpx;
		display: flex;
		.avatar-img {
			height: 120rpx;
			width: 120rpx;
			transform: translateY(-20rpx);
			border-radius: 60rpx;
		}
		.info-box {
			margin-left: 32rpx;
			.info-name {
				font-size: $uni-font-size-superlg;
				font-weight: bold;
			}
			.info-vip {
				display: flex;
				margin-top: 8rpx;
				.vip-id {
					font-size: 14px;
				}
				.vip-box {
					position: relative;
					margin-left: 16rpx;
					.vip-text {
						position: absolute;
						color: #dcb998;
						font-size: 12px;
					}
				}
			}
		}
	}
</style>